<template>
	<uni-popup ref="conditionPopupRef" type="center">
		<view class="question-condition">
			<view class="title">答题情况</view>
			<view class="list">
				<view class="item"
					:style="{backgroundColor: isReviewing ? '#FF8180' : '#F6F6F6', color: isReviewing? '#fff' : '#000'}"
					:class="{active: isSelected(index)}" v-for="(item, index) in questionList.length" :key="item"
					@click="toQuestionDetail(index)">{{item}}</view>
				<i class="item2"></i>
				<i class="item2"></i>
				<i class="item2"></i>
				<i class="item2"></i>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	defineProps({
		isReviewing: {
			type: Boolean,
			default: false
		},
		isSelected: {
			type: Function,
			default: () => {}
		},
		questionList: {
			type: Array,
			default: () => []
		}
	})

	const $emit = defineEmits('toQuestionDetail')
	// 答题情况弹出层的实例
	const conditionPopupRef = ref()

	const toQuestionDetail = (index) => {
		$emit('toQuestionDetail', index)
	}

	const open = () => {
		conditionPopupRef.value.open()
	}

	const close = () => {
		conditionPopupRef.value.close()
	}

	defineExpose({
		// 暴露显示和隐藏popup的方法
		open,
		close,
	})
</script>

<style lang="scss">
	.question-condition {
		border-radius: 20rpx;
		width: 600rpx;
		background-color: #FBFDFF;
		padding: 20rpx 20rpx 0;

		.title {
			font-size: 28rpx;
			color: $text-color;
			margin: 14rpx 0 14rpx 10rpx;
		}

		.list {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			.item {
				width: 70rpx;
				height: 70rpx;
				font-size: 24rpx;
				line-height: 70rpx;
				text-align: center;
				// background-color: #F6F6F6;
				border-radius: 50%;
				margin: 10rpx 20rpx;
			}

			.active {
				background-color: $second-primary-color !important;
				color: #FFF !important;
			}


			.item2 {
				width: 70rpx;
				margin: 20rpx;
			}
		}
	}
</style>